<template>
  <div class="search-page">
    <input
      class="search-page-input"
      type="text"
      :placeholder="$t('搜索')"
      @change="searchPage"
      @input="searchChange"
      @keyup.enter="searchPage"
    />

    <div class="panel-search-tip">
      {{ $t("您可以使用快捷键") }}
      <span class="panel-search-key">Enter</span> {{ $t("搜索面板，快捷键") }}
      <span class="panel-search-key">Esc</span> {{ $t("关闭") }}
    </div>

    <div class="search-pages" v-if="filter.length">
      <div
        class="search-pages-item"
        v-for="(item, index) in filter"
        :key="index"
        @click="selectPage(item.menuId)"
      >
        <div class="page-icon">
          <i class="sub-el-icon el-icon-document" />
        </div>

        <span>{{ item.menuName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { pinyin } from "pinyin-pro";
import { mapGetters } from "vuex";
import hotkeys from "hotkeys-js";
export default {
  data() {
    return {
      filter: [],
      routers: [],
    };
  },
  computed: {
    ...mapGetters(["hotkey_close"]),
  },
  mounted() {
    let _this = this;
    // 监听快捷键
    hotkeys(this.hotkey_close, function (event, handler) {
      // Prevent the default refresh event under WINDOWS system
      event.preventDefault();
      _this.$store.dispatch("settings/setSearchClose");
    });
    this.init();
  },
  beforeDestroy() {
    hotkeys.unbind(this.hotkey_close);
  },
  methods: {
    init() {
      if (sessionStorage.getItem("menus")) {
        const routers = JSON.parse(sessionStorage.getItem("menus"));
        this.routers = this.treeToArray(routers);
      }
    },
    selectPage(name) {
      this.$router.push(
        {
          name: name,
          query: {
            menuId: name,
          },
        },
        (page) => {
          if (page.meta.title && page.name && page.path) {
            const { path, name, meta } = page;
            this.$store.dispatch("app/openMenu", {
              path,
              name,
              meta,
            });
          } else {
            this.$router.push({
              name: "404",
            });
          }
          this.$store.dispatch("settings/setSearchClose");
        }
      );
    },
    searchChange(e) {
      if (e.target.value) {
        const search = this.$_Methods.debounce(() => {
          this.filter = this.routers.filter((item) => {
            // 拼音
            const titlePinyin = pinyin(item.menuName, {
              pattern: "pinyin",
              toneType: "none",
            }).replace(/\s/g, "");

            // 简拼
            const simplePinYin = pinyin(item.menuName, {
              pattern: "first",
              toneType: "none",
            })?.replace(/\s/g, "");

            return (
              (titlePinyin
                .toLowerCase()
                .includes(e.target.value.toLowerCase()) ||
                simplePinYin
                  .toLowerCase()
                  .includes(e.target.value.toLowerCase()) ||
                item.menuName.includes(e.target.value)) &&
              item.children.length == 0
            );
          });
        }, 1000);
        search();
      } else {
        this.filter = [];
      }
    },
    searchPage(e) {
      if (e.target.value) {
        this.filter = this.routers.filter((item) => {
          // 拼音
          const titlePinyin = pinyin(item.menuName, {
            pattern: "pinyin",
            toneType: "none",
          }).replace(/\s/g, "");

          // 简拼
          const simplePinYin = pinyin(item.menuName, {
            pattern: "first",
            toneType: "none",
          })?.replace(/\s/g, "");

          return (
            (titlePinyin.toLowerCase().includes(e.target.value.toLowerCase()) ||
              simplePinYin
                .toLowerCase()
                .includes(e.target.value.toLowerCase()) ||
              item.menuName.includes(e.target.value)) &&
            item.children.length == 0
          );
        });
      } else {
        this.filter = [];
      }
    },
    // 树转数组
    treeToArray(tree) {
      let arr = [];
      tree.forEach((item) => {
        const child = item.children;
        if (child && child.length > 0) {
          arr = arr.concat(this.treeToArray(child, item));
        } else {
          arr.push(item);
        }
      });
      return arr;
    },
  },
};
</script>

<style lang="scss" scoped>
.search-page {
  width: 100%;
  height: 100%;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

  .search-page-input {
    margin-top: 68px;
    width: 50%;
    min-width: 580px;
    height: 40px;
    padding: 0 15px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    outline: none;

    &:focus {
      border: 1px solid #409eff;
    }
  }

  .search-pages {
    margin-top: 36px;
    width: 60%;
    min-width: 680px;
    height: 455px;
    padding: 0 4px;
    transform: translateX(4px);
    overflow: hidden;
    overflow-y: auto;

    .search-pages-item {
      width: 100%;
      height: 64px;
      padding: 0 6px;
      background: #fff;
      border-radius: 2px;
      margin-bottom: 1px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      &:hover {
        background: #f5f7fa;
        color: #409eff;
      }

      .page-icon {
        width: 56px;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.panel-search-tip {
  margin-top: 20px;
  margin-bottom: 40px;
  font-size: 12px;
  color: #909399;
}

.panel-search-key {
  padding: 1px 5px;
  margin: 0 2px;
  border-radius: 2px;
  background-color: #606266;
  color: #f8f8f9;
}

.no-data-box {
  font-size: 400px;
  color: #606266;
}
</style>